iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
Modern Web

30天入門JavaScript系列 第 13

【Day 13】函式(三):JavaScript的函式特性

  • 分享至 

  • xImage
  •  


JavaScript的函式相關功能是個人最喜歡的部分,
以前大學寫C寫的跟屎一樣一定是不夠函式自由的錯(並沒有


在講特性前,這是之前一直在用的宣告方式

function 函式名稱(){}


這種宣告方式叫做函式陳述句,是最基本的函式宣告方式,
還有一種叫作函式表達式的宣告方式,
想理解JS函式特性,這種宣告方式很重要。

函式表達式


這種函式不一定有名稱,
把函式存在變數內,或當做引數傳給函式時都是這種宣告方式

//四種函式表達式
let func = function (f) {return f};//賦給變數

func(function(){});//被當作引數

(function () {
  console.log('hello');
})();

+function () { console.log('hello');}();

第三跟第四個叫做IIFE(立即呼叫函式表達式),
能讓你宣告一個沒有名稱的函式後立刻呼叫執行,
如果沒有用括號包起來或在前面加個運算子,
JS會認為你在做函式陳述句,會跳出錯誤說你宣告時需要有函式名。

箭頭函式

ES6新增的函式,"基本上"是函式表達式語法簡化版,可以少敲點程式碼
在只有一個參數時可以省略(),在只有內容只有回傳單個值時可以省略大括號跟return關鍵字

let funcA =function (){console.log('hello');}//函式表達式
let funcB = ()=>{console.log('hello');}//箭頭函式

let funcC = function (num) {
  return num + 2;
};
//可以簡化成
let funcD = (num) => num + 2;


箭頭函式跟函式表達式的this值會有差別,詳細等this篇再介紹



JavaScript函式的特性


JavaScript的函式使用的方式很自由,手邊各種書對這種自由的特性有很多名詞,
有一級函式、頭等公民、高階函式等很多叫法,
雖然都是差不多的東西但以前搞得我很亂,趁這個機會整理一下

高階函式(higher-order function)

維基百科對高階函式的定義:

接受一個或多個函式作為輸入
輸出一個函式

簡單來說,JS的函式可以接受函式當輸入跟輸出

一級函式(first-class function)跟頭等公民(first-class object)

因為JS中的函式就是物件的一種,
維基的說明比較長,簡單整理一下

  • 可以把函式當作引數傳給函式
  • 可以被當作回傳值

這兩個就是上面的高階函式

  • 可以被存在變數或其他資料結構

上面的函式表達式示範過把函式存在變數,另外也能存在陣列跟物件內

  • 匿名函式

不需要名稱也可以使用

  • 嵌套函式

可以在函式內定義新的函式



利用這些特性可以達成很多其他語言做不到的操作,
今天最後把這些特性簡單實作看看


let func = function () {};
let arr = [function () {}];
let obj = {
  func: function () {},
};

//將函式存在變數、陣列、物件

let add2 = function (num) {
  return num + 2;
};
let mul2 = function (num) {
  return num * 2;
};

let funcA = function (func1, func2) { 
  return function (num) {          //在函式內建立函式 而且回傳
    return func1(func2(num));  
  };
};
let funcB = funcA(add2, mul2); //將函式當作引數傳入
console.log(funcB(5)); //12

//呼叫沒有名稱的函式
(function () {console.log('hello');})();//hello

一直把函式打成函數好煩


上一篇
【Day 12】undeclared、let、const
下一篇
【Day 14】陣列(三):陣列的回呼方法
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言